<template>
  <div>
    <div class="background-image">
      <img :src="background">
  <div class="block" v-for="fit in fits" :key="fit">
    <span class="demonstration">{{ fit }}</span>
  </div>
</div>
    <!--<el-card class="nojob" v-if="!havejob">暂时没有该岗位信息</el-card>
    <el-card v-if="havejob" v-for="(item, key) in list" :key="key" class="jobcard">
      <div  @click="findDetail(item.recruit.id)">
     <img class="jobavatar" :src="item.company.avatar"/>
     <div class="introduce">
       <p>{{item.recruit.title}}</p>
       <p>{{item.company.address}}<span>|</span>{{item.company.scale}}<span>|</span>{{item.company.type}}</p>
     </div>
      </div>
    </el-card>-->
    <el-card class="jobresult" v-if="!havejob">xx分区</el-card>
    <el-select class="selectcity" v-model="value1" placeholder="选择城市">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option> 
    </el-select>
    <el-select class="selectedu" v-model="value3" placeholder="选择学历要求">
    <el-option
      v-for="item in edus"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option> 
    </el-select>
    <el-select class="selectenterprise" v-model="value4" placeholder="选择企业类型">
    <el-option
      v-for="item in enterprises"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option> 
    </el-select>
    <el-button class="filter">开始筛选</el-button>

    <el-row>
      <el-row :span="8" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 8 : 0">
        <el-card class="showjob">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="jobimg">
          <!--<img src="item.enterprise.info.logo" class="jobimg">-->
          <div class="jobname">
            <p><span>岗位名称</span></p>
            <!-- <p>{{item.enterprise.jobinfo.name}}</p>-->
          </div>
          <div class="jobdetail">
            <p><span>岗位公司</span><span> | </span><span>岗位城市</span></p>
            <p><span>岗位工资</span></p>
            <!-- <p>{{item.enterprise.register.name}}<span> | </span>{{item.enterprise.jobinfo.location}}</p>
            <p>{{item.enterprise.jobinfo.salary}}</p>-->
          </div>
          <el-button type="text" class="button" @click="tojobInfo">详细信息</el-button>
        </el-card>
      </el-row>
    </el-row>

    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<style>
@import "../css/index.css";
@import "../assets/Animate/animate.min.css";
.background-image{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nojob {
  margin: 0px auto auto auto;
  width: 763px;
}
.jobresult {
  margin: 0px auto auto auto;
  width: 763px;
}
.selectcity{
  left: 0px;
  top: 0px;
  width: 200px;
}
.selectedu{
  left: 0px;
  top: 0px;
  width: 200px;
}
.selectenterprise{
  left: 0px;
  top: 0px;
  width: 200px;
}
.filter{
  left: 0px;
  top: 0px; 
  width: 145px;
}
.showjob {
  margin: 1px auto auto auto;
  width: 763px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.jobimg {
  float: left;
  width: 100px;
  height: 100px;
  margin: auto 14px 20px auto;
}
.jobcard {
  width: 1000px;
  margin: 20px auto auto auto;
}
.jobavatar {
  float: left;
  width: 126px;
  height: 110px;
  margin: auto 14px 20px auto;
}
.jobname {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobname p {
  font-size: 18px;
  margin-bottom: 14px;
}
.jobdetail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobdetail p {
  font-size: 15px;
  margin-bottom: 5px;
  color: #999;
}

</style>

<script>
import fetch from '../api/fetch'
export default {
  data () {
    return {
      fit: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      background: require("../assets/background.png"),
      content: localStorage.getItem('content'),
      list: [],
      havejob: false,
      cities: [{
          value: 'othercities',
          label: '其他'
        },{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        },{
          value: 'allcities',
          label: '不限'
        }
        ],      
        edus: [{
          value: 'dazhuan',
          label: '大专'
        },{
          value: 'benke',
          label: '本科'
        }, {
          value: 'shuoshi',
          label: '硕士'
        },{
          value: 'boshi',
          label: '博士'
        },{
          value: 'alledus',
          label: '不限'
        }
        ],
        enterprises: [{
          value: 'otherenterprises',
          label: '其他'
        },{
          value: 'e1',
          label: '互联网'
        }, {
          value: 'e2',
          label: '金融'
        }, {
          value: 'e3',
          label: '快消'
        }, {
          value: 'e4',
          label: '传媒'
        }, {
          value: 'e5',
          label: '餐饮'
        }, {
          value: 'e6',
          label: '教育'
        },{
          value: 'e7',
          label: '化工'
        },{
          value: 'allenterprises',
          label: '不限'
        }
        ],      
        value1: [], 
        value2: [],
        value3: [],
      currentDate: new Date()
    }
  },
  mounted () {
    this.getJob()
  },
  methods: {
    findDetail (id) {
      localStorage.setItem('jobId', id)
      this.$router.push({name: 'jobInfo'})
    },
    getJob () {
      fetch
        .findJob(this.content.toLowerCase())
        .then(res => {
          if (res.status === 200) {
            if (res.data.success === true) {
              if (res.data.data.recruitList.length !== 0) {
                this.list = res.data.data.recruitList
                this.havejob = true
              }
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    tojobInfo() {
      this.$router.push({name: 'jobInfo'})
    }
  }
}
</script>
